<!--
 * 群组管理--新增编辑群组
 * @author: hexiaozhen
 * @since: 2023-10-31
 * addEditGroup.vue
-->
<template>
  <a-modal
    v-model:visible="visibleModal"
    :title="rowData.type === 'add' ? '新增群组' : '编辑群组'"
    title-align="start"
    width="600px"
    draggable
    :mask-closable="false"
    @cancel="handleCancel"
  >
    <TableForm
      ref="formAndTableRef"
      :rules="rules"
      :showMore="false"
      :rowspan="24"
      :formItems="formItems"
      :formData="formData"
      class="tableForm"
    ></TableForm>
    <template #footer>
      <footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </footer>
    </template>
  </a-modal>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import system from '@/api/modules/system'
import { Message } from '@arco-design/web-vue'
import { useUserStoreHook } from '@/store/modules/user'
const userStore = useUserStoreHook()
const props = defineProps({
  // 表单json配置项
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { visible, rowData } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
let visibleModal = ref(false) // 弹窗显示与隐藏
visibleModal.value = visible.value
const formAndTableRef = ref() // 表单
// 确定
const handleOk = () => {
  formAndTableRef.value.$refs.form.validate((valid) => {
    if (!valid) {
      const api = rowData.value.type === 'add' ? 'addGroup' : 'editGroup'
      let param = {
        groupName: formData.value.groupName,
        groupDesc: formData.value.groupDesc,
        groupCode: formData.value.groupCode,
        groupOwnerName: formData.value.groupOwnerName,
        groupOwner: formData.value.groupOwner,
        remark: formData.value.remark,
        groupId: formData.value.groupId,
      }
      system[api](param).then((res) => {
        visibleModal.value = false
        Message.success(res.msg)
        emit('submit')
        emit('update:visible', false)
      })
    }
  })
}
// 取消
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}

// 表单配置
const formItems = reactive([
  { name: 'groupName', label: '群组名称', type: 'a-input' },
  { name: 'groupCode', label: '群组编号', type: 'a-input' },
  { name: 'groupDesc', label: '群组描述', type: 'a-textarea' },
  { name: 'groupOwnerName', label: '群组维护人', type: 'a-input', readonly: true },
  { name: 'remark', label: '备注', type: 'a-textarea' },
])
let formData = ref({
  groupName: '',
  groupOwnerName: userStore.userInfo.nickName,
  groupOwner: '',
  groupDesc: '',
  groupCode: '',
  remark: '',
})

if (rowData.value.type === 'edit') {
  formData.value = rowData.value
} else {
  formData.value.groupCode = 'group' + new Date().getTime()
  formData.value.groupOwner = userStore.userInfo.userName
}
const rules = reactive({
  groupName: [{ required: true, message: '群组名称不能为空', trigger: 'blur' }],
  groupCode: [{ required: true, message: '群组编号不能为空', trigger: 'blur' }],
})
</script>
